<template>
  <div class="simple-music" :class="{ 'simple-detail': mode == 'details' }">
    <div v-if="mode == 'details'" :src="getCurrInfo.cover" class="details-bg"
      :style="{ 'background-image': mode == 'details' ? `url(${cover})` : '#fff' }"></div>
    <div class="details" v-if="mode == 'details'">
      <div class="cover">
        <a-image class="cover" width="300" height="300" :src="cover">
          <template #error>
            <img width="300" height="300" src="../assets/img/error_bg.jpg" />
          </template>
        </a-image>
      </div>
      <div class="lyric">
        <p class="title"> {{ getCurrInfo.name }}</p>
        <p class="author"> {{ getCurrInfo.artist }}</p>
        <div class="by-music-lrc">
          <div class="by-music-lrc-contents" :style="{
            transform:
              'translateY(-' +
              (lrcPosition > 5 ? (lrcPosition - 5) * 25 : 0) +
              'px)',
          }">
            <p v-for="(item, index) of fromatLrc" :key="'by-details-lrc-' + index">
              <span :class="{ 'text-lrc': lrcPosition == index }"
                :style="{ 'animation-duration': `${(fromatLrc[index + 1 == fromatLrc.length ? 0 : index + 1][0] - item[0]-1)}s` }">{{
                    item[1]
                }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="simple">
      <a-slider style="z-index:1" v-model="mCurrentTime" :format-tooltip="formatTime"
        @change="$emit('after-change', $event)" :max="totalTime"></a-slider>
      <div class="control">
        <div class="left">
          <div class="cover-warp">
            <a-image class="cover" width="60" height="60" show-loader :src="getCurrInfo.cover">
              <template #loader>
                <loadingVue></loadingVue>
              </template>
              <template #error>
                <loadingVue></loadingVue>
              </template>
            </a-image>
            <icon-double-up @click="routerLink" class="cover-into" />
          </div>
          <div class="info">
            <p class="title"> {{ getCurrInfo.name }}</p>
            <p class="author"> {{ getCurrInfo.artist }}</p>
          </div>
        </div>
        <a-space class="cont">
          <a-button shape="round" size="small">
            <template #icon>
              <icon-swap />
            </template>
          </a-button>
          <a-button shape="round" @click="$emit('click-jump', current - 1)">
            <template #icon>
              <icon-skip-previous />
            </template>
          </a-button>
          <a-button shape="round" type="primary" size="large" @click="$emit('click-toggle')">
            <template #icon>
              <icon-pause v-if="status" />
              <icon-play-arrow v-else />
            </template>
          </a-button>
          <a-button shape="round" @click="$emit('click-jump', current + 1)">
            <template #icon>
              <icon-skip-next />
            </template>
          </a-button>
          <a-trigger position="top">
            <template #content>
              <div class="volume">
                <a-slider @change="$emit('update:volume', $event)" :max="100" v-model="mVolume" direction="vertical">
                </a-slider>
              </div>
            </template>
            <a-button shape="round" size="small">
              <template #icon>
                <icon-sound v-if="volume != 0" />
                <icon-mute v-else />
              </template>
            </a-button>
          </a-trigger>

        </a-space>

        <a-space class="right">
          <span class="time">{{ formatTime(currentTime) }}/{{ formatTime(totalTime) }}</span>
          <a-button class="lyric" shape="round"><template #icon>
              词
            </template></a-button>
          <a-trigger position="top" trigger="hover" @show="scrollCurrent">
            <template #content>
              <ul class="list" ref="ByMusicList">
                <li v-for="(item, index) of list" :class="{ 'playing': index == current }"
                  @click="$emit('click-jump', index)" :key="item.music_id"><span>{{ item.name }}</span><span
                    class="author">{{ item.artist }}</span>
                </li>
              </ul>
            </template>
            <a-button class="list_btn" shape="round">
              <template #icon>
                <icon-unordered-list />
              </template>
            </a-button>
          </a-trigger>

        </a-space>
      </div>
    </div>
  </div>
</template>
<script>
import utils from "./utils";
import loadingVue from "./loading.vue";
export default {
  name: "SimpleMusic",
  components: {
    loadingVue
  },
  props: {
    list: Array,
    status: Boolean,
    current: Number,
    totalTime: Number,
    currentTime: Number,
    volume: Number,
    playbackMode: Number, //播放模式：0 播放完暂停。1 单曲循环 2循环播放
    cycleMode: Number, // 循环模式： 0 顺序播放。1随机播放
    loading: Boolean,
    routerLink: {
      tyep: Function,
      default: () => { }
    },
    mode: {
      type: String,
      default: "list",
    },
    config: Object,
  },
  emits: [
    "click-toggle",
    "click-cycle",
    "click-playback",
    "click-jump",
    "after-change",
    "update:volume",
  ],
  computed: {
    volumeStyle() {
      let style;
      if (this.mVolume == 0) {
        style = "iconvolume-off";
      } else if (this.volume == 100) {
        style = "iconvolume-up";
      } else {
        style = "iconvolume-down";
      }
      return style;
    },
    lrcPosition() {
      const larList = this.fromatLrc
      const leng = larList.length
      let i
      for (i = 0; i < leng; i++) {
        if (i == leng - 1 || (this.currentTime < larList[0][0])) {
          break
        } else if ((this.currentTime >= larList[i][0]-1 )&& (this.currentTime < larList[i + 1][0])) {
          break
        }
      }
      return i
    },
    fromatLrc() {
      const lrc = utils.parse(this.list[this.current]?.lrc);
      if (lrc.length == 0) {
        return [[0, ''], [0, ''], [0, ''], [0, ''], [0.01, "MGO音乐-听你想听~"]];
      }
      return lrc
    },
    getCurrInfo() {
      if ((this.list.length == 0) || (this.current < 0)) {
        this.cover = "http://i.miaosu.bid/data/f_22352226.jpg";
        return {
          name: "暂无播放列表",
          artist: "MGO音乐-听你想听",
          cover: "http://i.miaosu.bid/data/f_22352226.jpg"
        }
      }
      const img = new Image()
      img.src = this.list[this.current].cover;
      img.onload = (e) => {
        this.cover = img.src
      };
      return this.list[this.current]
    }
  },
  data() {
    return {
      mCurrentTime: this.currentTime,
      mVolume: this.volume,
      listShow: false,
      bodyShow: false,
      cover: "http://i.miaosu.bid/data/f_22352226.jpg"
    };
  },
  watch: {
    currentTime(newVal) {
      this.mCurrentTime = newVal;
    },
    volume(newVal) {
      this.mVolume = newVal
    },
  },
  methods: {
    formatTime(time) {
      return utils.transTime(time);
    },
    scrollCurrent() {
      console.log('scrollCurrent')
      const list = this.$refs.ByMusicList;
      console.log(list)
      if (list) {
        const scrollTop = list.scrollTop;
        console.log(scrollTop)
        if (
          this.current * 33 < scrollTop ||
          this.current * 33 - scrollTop >= list.clientHeight
        ) {
          console.log(list)
          utils.scrollTo(this.current * 33, { getContainer: () => list });
        }
      }

    },
  },
  mounted() {
    const list = this.$refs.ByMusicList
    if (list) {
      list.scrollTop = this.current * 33
    }
  },
};
</script>
<style lang="less" scoped>
.details {
  display: flex;
  height: 100vh;
  align-items: center;
  padding-bottom: 86px;
  box-sizing: border-box;

  .cover {
    flex: 1;
    display: flex;
    justify-content: center;
  }

  .lyric {
    flex: 1;

    .title {
      text-align: center;
      font-size: 30px;
      color: #fff;
      margin: 0 auto;
      margin-bottom: 20px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      max-width: 300px;
    }

    .author {
      text-align: center;
      color: rgba(255, 255, 255, 0.8);
      margin: 0 auto;
      margin-bottom: 30px;
      font-size: 18px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      max-width: 300px;
    }

    .by-music-lrc {
      position: relative;
      height: 275px;
      text-align: center;
      overflow: hidden;

      .by-music-lrc-contents {
        width: 100%;
        transition: all 0.3s ease-out;
        user-select: text;
        cursor: default;

        p {
          font-size: 16px;
          color: rgba(255, 255, 255, 0.6);
          letter-spacing: 2px;
          // 
          // color: #fff;
          line-height: 25px !important;
          height: 25px !important;
          padding: 0 !important;
          margin: 0 !important;
          transition: all 0.5s ease-out;
          overflow: hidden;
          background-size: 0 100%;

          .text-lrc {
            background: rgba(255, 255, 255, 0.6) -webkit-linear-gradient(left, #fff, #fff) no-repeat 0 0;
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            background-size: 100% 100%;
            font-size: 20px;
            animation-name:scan;
            animation-timing-function:ease
          }
        }

        .by-music-lrc-current {
          opacity: 1;
          overflow: visible;
          height: auto !important;
          min-height: 25px;
          color: rgba(255, 255, 255, 1);
          font-size: 20px;
        }


      }
    }
  }
}

.simple-detail {
  // backdrop-filter: saturate(110%) contrast(90%) blur(5px);
  position: relative;
  height: 100vh;
  width: 100%;
  backdrop-filter: brightness(80%) saturate(150%) blur(40px);
  overflow: hidden;

  .back {
    position: absolute;
    top: 30px;
    left: 59px;
    font-size: 20px;
    color: var(--color-text-2);
    z-index: 999;
  }

  .details-bg {
    filter: brightness(80%) saturate(150%) blur(30px);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transition: all 1s;
    transform: scale(1.1);
  }

  .details {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
  }

  .simple {
    position: fixed;
    z-index: 999;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: transparent;
    backdrop-filter: blur(10px);

    .title,
    .author,
    .time {
      color: #fff !important;
    }
  }
}

.simple {
  padding: 8px 10px;
  backdrop-filter: blur(10px);

  .control {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;
      overflow: hidden;
      flex: 1;

      .cover-warp {
        position: relative;

        .cover-into {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          transition: all .5s;
          color: #fff;
          font-size: 0px;
          cursor: pointer;
          padding: 5px;
        }

        &:hover {
          .cover-into {
            font-size: 30px;
          }
        }
      }

      .info {
        margin: 10px;
        overflow: hidden;

        .title {
          color: var(--color-fill-2);
          font-size: 16px;
          margin-bottom: 5px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }

        .author {
          color: var(--color-fill-3);
          font-size: 14px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }

    .cont {
      font-size: 18px;
      flex: 1;
      display: flex;
      justify-content: center;
    }

    .right {
      flex: 1;
      display: flex;
      justify-content: end;

      .time {
        color: var(--color-fill-3);
        font-size: 14px;
      }

    }
  }
}

.volume {
  padding: 5px 10px;
  background-color: #fff;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 10%);
  border-radius: 4px;

  .arco-slider-vertical {
    min-width: auto;
  }
}

.list {
  height: 300px;
  width: 250px;
  background-color: #fff;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 10%);
  overflow-y: auto;
  border-radius: 5px;
  padding: 0 10px;
  z-index: 9999999;

  li {
    height: 40px;
    margin: 5px 0;
    color: var(--color-text-2);
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 5px;
    transition: all .3s;
    cursor: pointer;

    &:hover {
      background-color: rgba(0, 0, 0, 10%);
    }

    span {
      flex: 1;
      align-items: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 15px;
    }

    .author {
      text-align: right;
      font-size: 14px;
    }

  }

  .playing {
    background-color: rgba(0, 0, 0, 10%);
  }
}

@keyframes scan {
  0% {
    background-size: 0 100%;
  }

  100% {
    background-size: 100% 100%;
  }
}
</style>